<html>
    <head>
        <meta charset="UTF-8">
        <title>事件的委派</title>
        <style type = "text/css">

        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                //点击按钮添加超链接
                var btn01 = document.getElementById("btn01");
                btn01.onclick = function()
                {
                    //创建一个li
                    var li = document.createElement("li");
                    li.innerHTML = "<a herf = 'javascript:;' class='link'>新建的超链接</a>"

                    //将li添加到ul中
                    u1.appendChild(li);
                }

                /*
                    为每一个超链接帮到你过一个单击响应函数(旧方法)
                */

                //获取所有的a
                // var allA = document.getElementsByTagName("a");
                // for(var i = 0 ; i < allA.length ; i++)
                // {
                //     allA[i].onclick = function()
                //     {
                //         alert("我是" + (i + 1));
                //     }
                // }

                /*
                    只绑定一次，就可以应用到所有的函数上，即使事后添加的(新方法)
                    事件的委派
                        指将事件统一绑定给元素的共同的祖先元素，这样当后代上的元素出发时，会一直冒泡到祖先元素，从而通过通过祖先元素的响应函数来处理事件。
                        事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序性能
                */
                u1.onclick = function(event)
                {
                    if(event.target.className == "link")
                    {
                        alert("115");
                    }
                }

                /*
                    addEventListener
                        该函数可以给一个事件添加多个响应函数，当事件被触发时，响应函数会按照函数的绑定顺序执行
                        参数：
                            1.事件的字符串，不需要on
                            2.回调函数，当事件触发时会被调用
                            3.是否在捕获阶段触发事件，需要一个bool值，一般都传false
                */

                u1.addEventListener("click", function(){
                    alert("116");
                }, false);
            }
        </script>
    </head>

    <body>
        <button id = "btn01">添加超链接</button>

        <ul id = "u1">
            <li><a herf = "javascript:;" class="link">超链接一</a></li>
            <li><a herf = "javascript:;" class="link">超链接二</a></li>
            <li><a herf = "javascript:;" class="link">超链接三</a></li>
        </ul>
    </body>
</html>